/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="index_class">
		<view class="setup">
			<view class="per-lists" style="margin-top: 0;">
				<view class="items title">
					<view>{{$t('头像')}}</view>
					<u-upload class="upload" :action="upLoadAction" :custom-btn="true" ref="upload"
						:form-data="formData" :show-progress="false" :preview-full-image="false"
						@on-success="uploadSuccess($event)" max-count="1" :upload-text="$t('上传头像')" width="100" height="100">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-image v-if="userInfo.headimgurl != ''" width="100" height="100" border-radius="10"
								:src="userInfo.headimgurl"></u-image>
							<u-icon v-if="userInfo.headimgurl == ''" name="account-fill" size="60" color="#c0c4cc">
							</u-icon>
						</view>
					</u-upload>
				</view>
			</view>

			<view class="per-lists">
				<!-- @click="getnav('/pagesB/my/ModifynickName')" -->
				<view class="items">
					{{$t("用户名")}}
					<view style="width:80%">
						<input type="text" v-model="userInfo.user_name" :placeholder="$t('请输入用户名')" />
					</view>
				</view>
			</view>
			<view class="per-lists">
				<view class="items" @click="sexShow=true">
					{{$t("性别")}}
					<view style="width:80%">
						<input type="text" :disabled="true" v-model="userInfo.sexLabel" :placeholder="$t('请选择性别')" />
						<u-select v-model="sexShow" mode="single-column" :list="sexList" @confirm="confirmSex"></u-select>
					</view>
				</view>
			</view>
			
			<view class="per-lists">
				<view class="items" @click="birthShow=true">
					{{$t("生日")}}
					<view style="width:80%">
						<input type="text" :disabled="true" v-model="userInfo.birth" :placeholder="$t('请选择出生日期')" />
						<u-picker mode="time" v-model="birthShow" @confirm="confirmBirth"></u-picker>
					</view>
				</view>
			</view>


			<view class="person-button">
				<button type="warn" @click="confirmEdit" class="btn">{{$t("确认修改")}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				isShow: false,
				upLoadAction: this.$baseUrl + 'api/Common/uploadPic',
				formData: {},
				headimgurl: '',
				sexList: [
					{
						value: '1',
						label: this.$t('男')
					},
					{
						value: '2',
						label: this.$t('女')
					},
					{
						value: '0',
						label: this.$t('保密')
					}
				],
				sexShow: false,
				birthShow: false
			};
		},
		onShow() {},
		onReady() {},
		onLoad() {
			this.getUserInfo()
			this.formData = this.$http.returnCommonParams('api/Common/uploadPic', 'usernfo')
		},
		methods: {
			getUserInfo() {
				this.$http.getUserInfo().then(res => {
					if (res.status == 200) {
						this.userInfo = res.data;
						if(this.userInfo.sex == 0){
							this.userInfo.sexLabel = this.$t('保密')
						}
						if(this.userInfo.sex == 1){
							this.userInfo.sexLabel = this.$t('男')
						}
						if(this.userInfo.sex == 2){
							this.userInfo.sexLabel = this.$t('女')
						}
					}
				})
			},
			confirmSex(v){
				this.userInfo.sex = v['0'].value
				this.userInfo.sexLabel = v['0'].label
			},
			confirmBirth(v){
				this.userInfo.birth = v.year+"-"+v.month+"-"+v.day
			},
			uploadSuccess(res) {
				this.$toast(res.mess)
				if (res.status == 200) {
					this.headimgurl = res.data.path
				}
			},
			confirmEdit() {
				this.$loading();
				const data = {
					headimgurl: this.headimgurl,
					user_name: this.userInfo.user_name,
					sex: this.userInfo.sex,
					birth: this.userInfo.birth
				};

				this.$http.editprofile(data).then(res => {
					if (res.status == 200) {
						this.$toast(res.mess);
						this.$hideLoading()
						uni.$emit('accountLogin', {})
						setTimeout(() => {
							this.$u.route({
								type: 'back'
							})
						}, 1000);
					}
				})
			},
			showDisalePhone() {
				this.$u.toast(this.$t('手机号暂不可修改'))
			}

		},
		onUnload() {
			uni.$off('accountLogin', () => {})
		}
	};
</script>

<style scoped>
	.upload {
		/* border-radius: 100rpx; */
		overflow: hidden;
	}

	.slot-btn {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}
</style>
